<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work3</title>
    <style type="text/css">
        table{
            width: 1200px;
        }
        .none{
            display: none;
            width: 1200px;
        }
    </style>
</head>
<body>
<span >
<form name="myform" method="post" action="#">
    <span>ID:<input type="text"></span>
    <span>NAME:<input type="text"></span>
    <span>AGE:<input type="text">-<input type="text"></span>
    <span>SALARY:<input type="text">-<input type="text"></span>
    <span><button type="button">select</button></span>
</form>
    <hr/>
    <table>
        <tr>
            <th>ID号</th>
            <th>NAME</th>
            <th>AGE</th>
            <th>SALARY</th>
            <th>操作：<button type="button" id="2">添加</button> </th>
        </tr>
        <tr>
            <th>10000</th>
            <th>zs0</th>
            <th>20</th>
            <th>10000</th>
            <th><button type="button">删除</button><button type="button">修改</button> </th>
        </tr>
         <tr>
            <th>10001</th>
            <th>zs1</th>
            <th>21</th>
            <th>10001</th>
            <th><button type="button">删除</button><button type="button">修改</button> </th>
        </tr>
         <tr>
            <th>10002</th>
            <th>zs2</th>
            <th>22</th>
            <th>10002</th>
            <th><button type="button">删除</button><button type="button">修改</button> </th>
        </tr>
    </table>
    <div class="none" id="3">
      <span>ID:<input type="text" id="addId"></span>
      <span>NAME:<input type="text" id="addName"></span>
      <span>AGE:<input type="text" id="addAge"></span>
      <span>SALARY:<input type="text" id="addSalary"></span>
      <button type="button" id="4">submit</button>
      <button type="button" id="cancle">cancle</button>
    </div>
</span>
<script type="text/javascript">
    let tableelement=document.querySelector("table");
    //获取添加的按钮元素
    let  addBtn=document.getElementById("2");
    //获取table
    let hiddencontent=document.getElementById("3");
    let submit=document.getElementById("4");
    let cancle = document.getElementById("cancle");
    addBtn.onclick=function (event) {
        hiddencontent.style.display="block";
    }
    cancle.onclick = function(event) {
      hiddencontent.style.display="none";
    }
    submit.onclick=function (event) {
      let id = document.getElementById("addId").value
      let name = document.getElementById("addName").value
      let age = document.getElementById("addAge").value
      let salary = document.getElementById("addSalary").value
      console.log(id);
      console.log(name);
      console.log(age);
      console.log(salary);
      let tr = document.createElement("tr")

      let td1 = document.createElement("td")
      let text1 = document.createTextNode(id);
      td1.appendChild(text1)
      let td2 = document.createElement("td")
      let text2 = document.createTextNode(name);
      td2.appendChild(text2)
      let td3 = document.createElement("td")
      let text3 = document.createTextNode(age);
      td3.appendChild(text3)
      let td4 = document.createElement("td")
      let text4 = document.createTextNode(salary);
      td4.appendChild(text4)
      let td5 = document.createElement("td")
      let btn1 = document.createElement("button")
      btn1.innerHTML = "删除"
      let btn2 = document.createElement("button")
      btn2.innerHTML = "编辑"
      td5.append(btn1,btn2)
      tr.append(td1,td2,td3,td4,td5)
      
      console.log(tr);
      tableelement.append(tr)
        //添加一行单元行
        //1.创建单元行,并放入到最后
        // let tmo_row=tableelement.insertRow(tableelement.rows.length);
        // //2.往行里添加单元格,创建多个td
        // let td_length=tableelement.rows[0].cells.length;
        // for (let i=0;i<td_length;i++) {
        //     let td = tmo_row.insertCell(i);
        //     //往单元格中放值
        //     if (i == td_length - 1) {
        //         td.innerHTML = "<button type='button'>删除</button><button type='button'>修改</button>";
        //     } else {
        //         td.innerHTML =hiddencontent[i].value;
        //     }
        // }

        hiddencontent.style.display="none";
    }

</script>
</body>
</html>